<template>
  <div class="implement">
    <van-row class="var-row" style="">
      <van-col span="16">
        <van-field
          readonly
          clickable
          label="部门"
          :value="selectedDepartment"
          placeholder="选择部门"
          @click="showPicker = true"
        />
      </van-col>
      <van-col span="8">
          <van-button type="primary" @click="onLoad(selectedDepartment)" style="margin-top:0;width:60%;">查询</van-button>
      </van-col>
    </van-row>

    <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad(selectedDepartment)">
      <div v-show="!loading">
        <template v-if="list.length">
          <van-cell v-for="item in list" :key="item.id" @click="queryOrderInfo(item.id)">
            <span>{{item.KKScode}}</span><br>
            <span>{{item.description}}</span><br>
            <span>{{item.leader}}</span>
          </van-cell>
        </template>
        <template v-else>
          <span>没有数据</span>
        </template>
      </div>
    </van-list>
    <van-popup v-model="showPicker" position="bottom">
      <van-picker
        show-toolbar
        :columns="columns"
        @cancel="showPicker = false"
        @confirm="onConfirm"
      />
    </van-popup>
  </div>
</template>
<style lang="less" scoped>
 /deep/.var-row{
    position:sticky;
    padding-top:1vh;
    top:46px;
    left:0;
    z-index:2;
    background-color: #fff;
  }
</style>
<script>
import {getDepartmentList,getNoticeList} from "@/api/data"
import {mapState} from 'vuex'

export default {
  data() {
    return {
      showPicker: false,
      columns: [],

      list: [],
      loading: false,
      finished: false
    };
  },
  computed:{
    ...mapState({
      selectedDepartment: state => state.user.userInfo.department,
    })
  },
  methods: {
    getDepartmentList(){
      getDepartmentList().then(res=>{
        this.columns = res.data
      })
    },
    onConfirm(value) {
      this.selectedDepartment = value;
      this.showPicker = false;
    },
    queryOrderInfo(id){
        this.$router.push({path:"implement-detail/"+id});
    },
    onLoad(data) {
      if(!data){
        this.$toast("请选择部门！")
      }
      this.loading = true;  
      this.finished = false;   
       getNoticeList(data).then(res=>{
         // 加载状态结束
          this.loading = false;         
          this.list= res.data;
          // 数据全部加载完成
          this.finished = true;
        })
    }
  },
  created(){
    this.getDepartmentList();
  }
};
</script>
